<%@ include file="importhead.jsp" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="css/blogerarticle.css" rel="stylesheet" type="text/css" />
		<link href="css/topmenu.css" rel="stylesheet" type="text/css" />
		<title>${vf.topic }</title>
	</head>

	<body>
		<!--评论发表的输入信息为空验证函数所在的js文件的引入-->
		<script type="text/javascript" src="bloger.js"></script>
		<%@ include file="systemmeum.jsp" %>
		<!-- end sysmenu -->
		<!-- 菜单2区，菜单为文章目录和关于我-->
		<div id="menu2">
			<ul>
				<li>
					<a href="Blogmain.do">回主页</a>
				</li>
				<li id="menuDiv"></li>
				<li>
					<a href="Bloger.do?id=${vf.userid }">博文目录</a>
				</li>
				<li id="menuDiv"></li>
				<li>
					<a href="#">关于我</a>
				</li>
			</ul>
		</div>
		<!-- 博主个人图片区 -->
		<div id="masterinfo">
			<img src="/upload/${vu.photoname }" title="${vu.nickname }" width="100%" height="100%" alt="${vu.nickname }的博客" />
		</div>
		<!-- 博主个人签名区-->
		<div id="bloginfo">
			<span id="bloger">【${vu.nickname }</span><span id="bloger">的博客】</span><br><br />
			<span id="sign">${vu.signed }</span>
		</div>
		<!--博主空间统计区-->
		<div id="statistic">
			<div id="statistictopic">
				<span>统计数据</span>
			</div>
			<table width="100%">
				<tr>
					<td width="60%" style="text-align:right">当前浏览人数：</td>
					<td width="40%" style="text-align:right; padding-right:10px">32</td>
				</tr>
				<tr>
					<td style="text-align:right">评论数：</td>
					<td style="text-align:right; padding-right:10px">521</td>
				</tr>
				<tr>
					<td style="text-align:right">历史浏览人数：</td>
					<td style="text-align:right; padding-right:10px">1928</td>
				</tr>
			</table>
		</div>
		<!--热点文章目录区-->
		<div id="recommend">
			<div id="recommendtopic">
				<span>热点博文</span>
			</div>
			<ul>
				<li>
					<a href="article.html">【丽江】冒着大雨奔向...(11)</a>
				</li>
				<li>
					<a href="#">【新加坡】路过但不想...(23)</a>
				</li>
			</ul>
		</div>
		<!--文章搜索区-->
		<div id="search">
			<div id="searchtopic">
				<span>搜博主文章</span>
			</div>
			<span>
<form id="searchform" name="searchform" method="post" action="">
<input style="width:120px; margin-left:10px" type="text" name="txtsearch"
id="txtsearch" />
<input style="width:60px" type="submit" name="btnsearch" id="btnsearch"
value="搜索" />
</form>
</span>
		</div>
		<div style="width:100%;height:0.1px; clear: both;"></div>
		<!--文章内容区-->
		<div id="main">
			<!--文章内容区标题-->
			<div id="topic">
				<span class="articletopic">正文</span>
				<c:if test="${user.userid!='' && user.userid == vf.userid}">
					<span class="articleedit"><a href="ManagearticleCtrServlet.do?titleid=${vf.titleid }">编辑</a></span>
				</c:if>
				
				
			</div>
			<!--文章名称-->
			<div id="article">
				<table width="80%">
					<tr>
						<td id="articletopic">【${vf.serilize }】${vf.topic }</td>
						<td id="articlereview">(${vf.reviewcounter })</td>
						<td id="articlecreate">${vf.createtime }</td>
					</tr>
				</table>
			</div>
			<!--文章内容，含图片和文字-->
			<!--文章内容，含图片和文字-->
			<div id="content">
				<table>
					
					 <c:forEach items="${list }" var="vfo" step="1">

					<tr>
						<td><img src="/upload/${vfo.photoname }" width="100%"></td>
					</tr>
					<tr>
						<td>(${vfo.ordernum })${vfo.textcontent }</td>
					</tr>
					</c:forEach>
				</table>
			</div>
			<!--end content -->
			<!--文章评论区-->
			<div id="review">
				<div id="reviewtopic">
					<span>评论</span>
				</div>
				 
				 <c:forEach items="${rlist }" var="vr" step="1">
				<table width="100%">
					<tr>
						<td colspan="2" id="reviewusername"><img class="userphoto" src="/upload/${vr.photoname }" />
							<span style="margin-left:20px">${vr.nickname }</span></td>
					</tr>
					<tr>
						<td colspan="2" id="reviewcontent">${vr.reviewcontent }</td>
					</tr>
					<tr>
						<td id="reviewtime">${vr.createtime }</td>
						<td id="reviewdelete">${vr.ipaddr }</td>
					</tr>
				</table>
			</c:forEach>
			</div>
			<!- 发表评论区-->
			<div id="addreview">
				<form id="form1" name="form1" method="post" action="#">
					<table width="100%">
						<tr>
							<td colspan="2" class="addreviewtopic" style="height:20px">发评论
							</td>
						</tr>
						<tr>
							<td width="69%" class="addreviewusername" style="height:40px">用户姓 名：未登录
							</td>
							<td width="31%" class="addreviewusername" style="height:40px">
								<a href="login.jsp">登录</a> &nbsp; &nbsp; &nbsp;
								<a href="#">注册</a>
								<a href="logout">退出登录</a>
							</td>
						</tr>
						<tr>
							<td colspan="2"><label for="textarea"></label>
								<textarea name="txtreview" id="txtreview" cols="65" 第 8 页 共 20 页 第四课 博客文章内容页面的静态网页设计 rows="6"></textarea></td>
						</tr>
						<tr>
							<tdcolspan="2">
								<inputtype="submit" name="button" disabledid="button" value="提交" />
								</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
		<script type="text/javascript">
			$(document).ready(
				function() {
					//判断显示器的分辨率
					var winWidth = document.documentElement.clientWidth;
					var winHeight = document.documentElement.clientheight;
					//var main = document.getElementById("main");
					var main1 = $("#main");
					var topic = $("#topic");
					var content = $("#content");
					var footer = $("#footer");
					main1.css("width", (winWidth - 1024) / 2 + 760 + "px");
					topic.css("width", (winWidth - 1024) / 2 + 760 - 22 + "px");
					content.css("width", (winWidth - 1024) / 2 + 760 + "px");
					footer.css("width", (winWidth - 1024) / 2 + 760 + "px");
				}
			);
		</script>
		<div class="copyright">
			<p>Copyright ©2014-SoftwareTechnologyfrom
				<ahref="http://www.yngsxy.net/" title="云南工商学院" target="_blank">云南工商学院</a>
			</p>
		</div>
	</body>

</html>